<script setup lang="ts">
import { reactive, watch } from 'vue';
import { Form } from 'ant-design-vue';
import { ROLE_OPTIONS, GROUP_OPTIONS } from '@/const/index.ts';
import TagChecked from '@/components/tag-checked/index.vue';

const useForm = Form.useForm;
const formState = reactive({
	wokerInfo: '',
	role: [],
	group: [],
});

useForm(formState);
watch(formState, () => {
	console.log(formState);
}, {
	deep: true,
	immediate: true
});
</script>

<template>
	<div class="form-wrap pb-5">
		<h3>搜索条件</h3>
		<a-form-item label="职工信息">
			<a-input placeholder="可输入职工姓名、身份证号、手机进行查询" v-model:value="formState.wokerInfo"></a-input>
		</a-form-item>
		<a-form-item label="角色">
			<TagChecked :options="ROLE_OPTIONS" v-model:value="formState.role"></TagChecked>
		</a-form-item>
		<a-form-item label="组别">
			<TagChecked :options="GROUP_OPTIONS" v-model:value="formState.group"></TagChecked>
		</a-form-item>
	</div>
</template>
<style scoped></style>
